<template>
  <view @longpress="handleShowAddBut">
    <u-list   @scrolltolower="scrolltolower" :pagingEnabled="true" :showScrollbar="true"
              @scrollWithAnimation="true" :key="listKey">
      <u-list-item v-for="(item, index) in items"   :class="[
    'custom-list-item',`status-${item.initFormStatus}`]">
        <u-row>
          <u-col>
            <u-cell :title="`物料编码：${item.invCode}`"></u-cell>
          </u-col>
        </u-row>
        <u-row>
          <u-col>
            <u-cell :title="`单位：${item.unitName}`"></u-cell>
          </u-col>
        </u-row>
        <u-row>
          <u-col>
            <u-cell :title="`车间：${item.workshop}`"></u-cell>
          </u-col>
        </u-row>
        <u-row>
          <u-col>
            <u-cell :title="`状态：${getDictValue('over_init_status', item.initFormStatus)}`"></u-cell>
          </u-col>
        </u-row>
        <u-row>
          <u-col>
            <u-cell :title="`溢出库存：${item.overQty}`"></u-cell>
          </u-col>
        </u-row>
        <u-row>
          <u-col span="4" v-show="item.initFormStatus === 0 || item.initFormStatus === 3">
            <u-button type="warning" @click="handleUpdate(item)">修改</u-button>
          </u-col>
          <u-col span="4">
            <u-button type="primary" @click="handleVerify(item)">确认</u-button>
          </u-col>
          <u-col span="4" v-show="item.initFormStatus === 0 || item.initFormStatus === 3">
            <u-button type="warning" @click="handleDel(item)">删除</u-button>
          </u-col>
          <u-col span="8" v-show="item.initFormStatus === 1">
            <u-button type="warning" @click="handleRefuse(item)">否决</u-button>
          </u-col>
        </u-row>
      </u-list-item>
    </u-list>
    <u-loading-icon :show="loading" text="加载中" textSize="18"></u-loading-icon>
    <u-modal :show="show"  :title="title" showCancelButton confirmText="提交" @cancel="show = false"
             :showConfirmButton="true" @confirm="submitForm">
      <u--form :model="form" ref="uForm">
        <u-form-item label="物料编码">
          <u--input
              placeholder="请输入物料编码"
              border="surround"
              v-model="form.invCode"
          ></u--input>
        </u-form-item>
        <u-form-item label="车间">
          <u-radio-group
              v-model="form.workshop"
              placement="column"
          >
            <u-radio
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in radiolist"
                :key="index"
                :label="item.name"
                :name="item.name"
            >
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="溢出库存">
          <u--input
              placeholder="请输入溢出库存"
              border="surround"
              type="number"
              v-model="form.overQty"
          ></u--input>
        </u-form-item>
      </u--form>
    </u-modal>
    <view v-show="showAddBut" class="fixed-bottom">
      <u-button  @click="addInitForm">新增期初</u-button>
    </view>
  </view>
</template>

<script>

import {
  addInitForm, del,
  refuse,
  searchList,
  updateInitForm, verify
} from "@/api/work/stockTrace/stockInit";
import {strIsEmpty} from "@/utils/paramUtil";
import {getDictValue, initDict} from "@/utils/dictUtil";

export default {
  components: {},
  data() {
    return {
      show: false,
      showAddBut: false,
      loading: false,
      items: [],
      listKey: Date.now(),
      tempItem: null,
      param: {
        pageNum: 0,
        pageSize: 10,
      },
      form: {
        invCode: null,
        workshop: '电装',
        overQty: 0
      },
      title: '',
      radiolist: [{
        name: '电装',
        disabled: false
      },
        {
          name: '系统',
          disabled: false
        },
      ],
      // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
    };
  },
  onShow() {
    initDict(['over_init_status'])
    this.loadMore();
  },
  methods: {
    getDictValue,
    handleShowAddBut() {
      // 长按显示增加开关，3秒后消失
      this.showAddBut = true;
      setTimeout(() => {
        this.showAddBut = false;
      }, 3000);
    },
    scrolltolower() {
      if (this.items.length >= this.total) {
        this.$modal.showToast("没有更多数据了");
        return;
      }
      // 计算最大页数
      let maxPage = Math.ceil(this.total / this.param.pageSize);
      if (maxPage === this.param.pageNum) {
        this.$modal.showToast("已到最后一页");
        return;
      }
      this.loadMore()
    },
    refreshData() {
      this.items = [];
      this.param.pageNum = 0;
      this.loadMore();
    },
    loadMore() {
      this.loading = true;
      this.param.pageNum = this.param.pageNum + 1;
      searchList(this.param).then(res => {
        this.listKey = Date.now();
        this.total = res.total;
        if (res.rows.length > 0) {
          res.rows.forEach(item => this.items.push(item));
        } else {
          this.$modal.msg("无数据！");
        }
        this.loading = false;
      });
    },
    handleUpdate(item) {
      this.show = true;
      this.title = '修改';
      this.tempItem = item;
      this.form = {
        iid: item.iid,
        invCode: item.invCode,
        workshop: item.workshop,
        overQty: item.overQty,
        initFormStatus: item.initFormStatus
      };
    },
    handleDel(item) {
      del(item).then(() => {
        this.$modal.msgSuccess("删除成功");
        let index = this.items.indexOf(item);
        if (index > -1) {
          this.items.splice(index, 1);
        }
        this.refreshData();
      });
      // 解决数据不刷新的BUG
      item.unitName = null;
    },
    handleVerify(item) {
      // 仓库确认
      verify(item).then(() => {
        this.$modal.msgSuccess("确认成功");
        let index = this.items.indexOf(item);
        if (index > -1) {
          this.items.splice(index, 1);
        }
        this.refreshData();
      });
      // 解决数据不刷新的BUG
      item.unitName = null;
    },
    handleRefuse(item) {
      refuse(item).then(() => {
        this.$modal.msgSuccess("否决成功");
        this.refreshData();
      });
      // 解决数据不刷新的BUG
      item.unitName = null;
    },
    addInitForm() {
      this.show = true;
      this.title = '新增';
      this.form = {
        iid: null,
        invCode: null,
        workshop: '电装',
        overQty: 0,
        initFormStatus: 0,
      };
    },
    submitForm() {
      if (strIsEmpty(this.form.invCode)) {
        this.$modal.msgError("物料编码不能为空");
        return;
      }
      if (this.title === '新增') {
        addInitForm(this.form).then(() => {
          this.$modal.msgSuccess("提交成功");
          this.refreshData();
          this.show = false;
        });
      } else {
        // 解决数据不刷新的BUG
        this.tempItem.unitName = null;
        updateInitForm(this.form).then(() => {
          this.$modal.msgSuccess("修改成功");
          this.refreshData();
          this.show = false;
        });
      }
    }
  },

};</script>
<style>
.custom-list-item {
  /* 如果需要让整个列表项点击区域都生效，可能还需要下面这行 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
  height: 100%; /* 根据实际情况调整高度 */
}
.status-0 {
  background-color: #ADD8E6;
}

.status-1 {
  background-color: #43dee3;
}

.status-2 {
  background-color: rgba(133, 232, 121, 0.81);
}

.status-3 {
  background-color: #CCCCCC;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 可能需要设置一些内边距或外边距以保持良好的视觉效果 */
  padding: 10px;
  text-align: center;
  background-color: #fff; /* 背景色与页面背景色相同或透明，视设计而定 */
  z-index: 999; /* 确保按钮在最上层 */
}
</style>

